<template>
  {{targetKeys}}
    <a-transfer
      v-model:target-keys="targetKeys"
      :data-source="dataSource"
      show-search
      :select-all-labels="selectAllLabels"
      :titles="['字段库', '已选择字段']"
      :render="item => item.comment"
      pagination
      @change="handleChange"
    />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectAllLabel } from "ant-design-vue/es/transfer";
const props = defineProps({
  dataSource:{
    default:()=>([] as any[])
  },
  rightDataSource:{
    default:()=>([] as any[])
  },
  tableId:{
    default:-1
  }
})

const emits = defineEmits(["moveChange"])

const oriTargetKeys = props.rightDataSource.map(item=>item.tableColumnId)
const id = props.tableId
const targetKeys = ref<string[]>(oriTargetKeys);

const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
  console.log('targetKeys: ', nextTargetKeys);
  console.log('direction: ', direction);
  console.log('moveKeys: ', moveKeys);
  emits("moveChange",{to:direction,list:moveKeys,id:id})

};

const selectAllLabels: SelectAllLabel[] = [
  ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
  ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
];
</script>

